<template>
  <div class="file">
    <el-table
      :data="dataList"
      border
      v-loading="loading"
    >
      <el-table-column
        prop="id"
        label="ID"
        show-overflow-tooltip
        align="center"
        header-align="center"
        min-width="30"
      >
        <span slot-scope="{ row }">{{ row.id }}</span>
      </el-table-column>
      <el-table-column
        prop="name"
        label="文件名"
        show-overflow-tooltip
        align="center"
        header-align="center"
      >
        <span slot-scope="{ row }">{{ row.name }}</span>
      </el-table-column>
      <el-table-column
        prop="storagePath"
        label="文件路径"
        show-overflow-tooltip
        align="center"
        header-align="center"
      >
        <span slot-scope="{ row }">{{ row.storagePath }}</span>
      </el-table-column>
      <el-table-column
        prop="createTime"
        label="创建时间"
        show-overflow-tooltip
        align="center"
        header-align="center"
      >
        <span slot-scope="{ row }">{{ formatDate(row.createTime) }}</span>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        header-align="center"
        width="100"
      >
        <template slot-scope="{ row }">
           <el-button @click="handleDelete(row.id)" type="danger" size="mini" icon="el-icon-delete" circle></el-button>
           <!-- <el-button @click="handleView(row.storagePath)" type="primary" size="mini" icon="el-icon-view" circle></el-button> -->
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      style="margin: 20px 0;"
      :page-size="10"
      :total="total"
      :current-page.sync="pageIndex"
      @current-change="handleChangePage"
    >
    </el-pagination>
    <!-- <el-dialog
      :visible.sync="showDialog"
      title="PDF预览"
      fullscreen
      :modal="false"
      custom-class="dialog"
    >
      <iframe :src="'/pdf/web/viewer.html?file='+ pdfSrc" style="width: 100%; height: 100%"/>
    </el-dialog> -->
    <copyright class="bottom-layer" />
  </div>
</template>

<script>
import { getAll, deletePdf } from '../api/v1/paperPdf'
import { formatDate } from "../libs/tools";
export default {
  name: 'File',
  data() {
    return {
      dataList: [],
      loading: false,
      total: 100,
      pageIndex: 1,
      showDialog: false,
      // pdfSrc: 'http://file.dakawengu.com/file/2018-05-29/20180527-tianfeng.pdf'
      pdfSrc: ''
    }
  },
  methods: {
    handleView(path) {
      this.padSrc = path
      console.log(path)
      this.showDialog = true
    },
    handleDelete(id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        if(id) {
          deletePdf(id).then(res => {
            this.$message.success('删除成功！')
            this.getData(1)
          }).catch(e => {
            this.$message.error('删除失败!')
          })
        } else {
          console.log(id)
        }
      }).catch(e => {
        
      })
    },
    formatDate,
    getData(pageIndex) {
      this.loading = true
      getAll(pageIndex).then(res => {
        this.loading = false
        this.dataList = res.data.results
        this.total = res.data.resultNumber
      }).catch(e => {
        this.loading = false
        this.dataList = []
      })
    },
    handleChangePage(pageIndex) {
      this.getData(pageIndex)
    }
  },
  created() {
    this.getData(1)
  }
}
</script>

<style scoped>
.file {
  position: relative;
  min-height: calc(100% - 30px);
}
</style>